<template>
  <div>
  <ui-table
    :data="tableData"
    style="width: 100%"
    >
    <ui-table-column
      prop="date"
      label="日期"
      width="180"
      >
    </ui-table-column>
    <ui-table-column
      prop="name"
      label="姓名"
      width="180">
    </ui-table-column>
    <ui-table-column
      prop="address"
      label="地址">
      <template v-slot="scope">
        <ui-button @click="show(scope)">{{scope.row}}</ui-button>
      </template>
      <!-- <template slot-scope="scope">  
          <ui-button @click="show(scope.row)">{{ scope.row.address }}</ui-button>  
        </template>   -->
    </ui-table-column>
    <ui-table-column
      label="操作">
      <template v-slot="scope">
        <ui-button @click="deleteRow(scope.row)" type="text">删除</ui-button>
      </template>
    </ui-table-column>
    
  </ui-table>
</div>
</template>

<script>
  export default {
    /* DELETE */
    desc: "当`ui-table`元素中注入`data`对象数组后，在`ui-table-column`中用`prop`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。",
    /* DELETE */
    data() {
      return {
        tableData: [
          {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex:'女'
        },
        {
          date: '2016-05-02',
          name: 'ltk',
          address: '上海市普陀区金沙江路 1518 弄'
        
        }
      ]
      }
    },
    methods:{
      show(scope){
        console.log( typeof scope,scope); 
      },
     deleteRow(row){
       let index = this.tableData.findIndex(item=> item.name==row.name);
       if(index>-1){
       this.tableData.splice(index,1);
       }
     }
    }
  }
</script>